<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>登录</title>
  <link rel="stylesheet" type="text/css" href="#(base)/fslayui/plugins/layui/css/layui.css" media="all"/>
  <link rel="stylesheet" href="#(base)/fslayui/css/login2.css">
  <script type="text/javascript" src="#(base)/fslayui/plugins/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="#(base)/fslayui/css/velocity.min.js"></script>
  <script type="text/javascript" src="#(base)/fslayui/plugins/layui/layui.js"></script>
  <script type="text/javascript" src="#(base)/js/login2.js"></script>
  <script type="text/javascript" src="#(base)/js/common/Mtils.js"></script>
  <style>
    body {
        height: 100vh;
        display: grid;
        place-content: center;
        background: linear-gradient(90deg, #060a3f 0%,#2b60d7 100%);
        overflow: hidden;
    }
  </style>
</head>
<body class="login-wrap">
  <canvas style="position:fixed;z-index:-1;"></canvas>
    <div class="login-container">
        <form method="post" class="login-form layui-form">
        	<div  align="center"><h1>学生成绩管理系统</h1></div>
            <div class="input-group">
            	<input id="number" type="text" lay-filter="number" name="number"  lay-verify="required" class="layui-input input-field">
                <label for="number" class="input-label">
                    <span class="label-title">学号</span>
                </label>
            </div>
            <div class="input-group">
            	<input id="password" type="password" lay-filter="password" name="password"  lay-verify="required" class="layui-input input-field">
                <label for="password" class="input-label">
                    <span class="label-title">密码</span>
                </label>
            </div>
            <div class="input-group">
            	<input id="code" type="text" lay-filter="code" name="code"  lay-verify="required" class="layui-input input-field">
                <label for="code" class="input-label">
                    <span class="label-title">验证码</span>
                </label>
            </div>
            <div class="yzm"><img id="codeimg" src="#(base)/stulogin/randomcode" onclick="reCode()" ></div>
            <button type="button" lay-submit lay-filter="login" class="login-button">登录<i class="ai ai-enter"></i></button>
        </form>
    </div>
</body>

<script>
	layui.use(['form','layer'],function(){
		var form = layui.form;
		var layer = layui.layer;
		form.on('submit(login)', function(data){
			var loginload = layer.load();
			var formdata = data.field;
			formdata['password'] = Mtils.security.hex_md5(formdata['password']);
			$.ajax({
				type:"POST",
				url:"/stulogin",
				dataType:"json",
				data:formdata,
				success:function(data){
					layer.close(loginload);
					console.log(data)
					if(data.state == 'ok'){
						layer.msg(data.msg, {icon: 1,anim: 0},function(){
							window.location.href="#(base)/";
						});
					}else{
						layer.msg(data.msg, {icon: 2,anim: 6},function () {
							$("#codeimg").attr('src', "#(base)/stulogin/randomcode?t=" + Math.random());
						});
					}
				},
				error:function(jqXHR){
					layer.close(loginload);
					layer.msg("发生错误："+jqXHR.status, {icon: 2,anim: 6});
					console.log("发生错误："+jqXHR.status);
				}
			});
			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
	})

	function reCode(){
		$("#codeimg").attr('src', "#(base)/stulogin/randomcode?t=" + Math.random());
	}
</script>
</html>
